<template>
    <div class="travel-order-progress" :style="{ 'height': (fullHeight - 117) + 'px' }">
        <div ref="dgtools" class="filter-container" style="padding: 5px;background: #ffffff;">
            <!-- 车辆当前位置 -->
            <div style="display: flex;width: 100%;height: 35px;justify-content: flex-start;align-items: center;">
                <span style="font-weight: 700;">车辆当前位置：</span>
                <el-select v-model="dg.now.plateNum" clearable collapse-tags :placeholder="'车牌号'" style="width: 140px">
                    <el-option v-for="it in plateNumArr" :label="it.plate_num" :key="it.plate_num"
                        :value="it.plate_num">
                    </el-option>
                </el-select>
                <div style="width: 10px;"></div>
                <!-- <el-select v-model="getVehiclesCurrentPositionByProgram_data" collapse-tags :placeholder="'车牌号'"
                    style="width: 120px;margin-left: 20rpx;">
                    <el-option label="GPS定位" value="1" />
                    <el-option label="小程序定位" value="2" />
                </el-select> -->
                <div style="width: 10px;"></div>
                <el-button style="margin-left: 20rpx;" type="primary" icon="Search"
                    @click.native="getDgList(1, 1)">GPS定位</el-button>
                <el-button style="margin-left: 20rpx;" type="primary" icon="Search"
                    @click.native="getDgList(1, 2)">小程序定位</el-button>
                <div
                    style="display: flex;margin-left: 15px;height: 35px;justify-content: flex-start;align-items: center;">
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;"
                            src="https://img0.baidu.com/it/u=1063578595,2842121212&fm=253&fmt=auto&app=138&f=JPEG?w=740&h=400"
                            alt="" srcset=""><b style="color: blue;">：{{ onCurrentRouteCars }} 辆</b>
                    </div>
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;" src="https://t8.baidu.com/it/u=95513423,888278254&fm=193" alt=""
                            srcset=""><b style="color: blue;">：{{ allDayNoOrderCars }} 辆</b>
                    </div>
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;"
                            src="https://img1.baidu.com/it/u=979548916,3828174446&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400"
                            alt="" srcset=""><b style="color: blue;">：{{ haveOrderButNotCurrentCars }} 辆</b>
                    </div>


                </div>
                <div style="flex-direction: column;display: flex; margin-left: 450px;height: 35px;align-items: start;">
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;"
                            src="https://img0.baidu.com/it/u=1063578595,2842121212&fm=253&fmt=auto&app=138&f=JPEG?w=740&h=400"
                            alt="" srcset=""><b style="color: blue;">：在行程上的车辆</b>
                    </div>
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;" src="https://t8.baidu.com/it/u=95513423,888278254&fm=193" alt=""
                            srcset=""><b style="color: blue;">：今天无订单的车辆</b>
                    </div>
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;"
                            src="https://img1.baidu.com/it/u=979548916,3828174446&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400"
                            alt="" srcset=""><b style="color: blue;">：今天有订单，但是当前不在行程上的车辆</b>
                    </div>


                </div>
            </div>

            <!-- 车辆轨迹 -->
            <el-form style="display: flex;width: 100%;height: 35px;justify-content: flex-start;align-items: center;"
                :model="dg.se" :inline="true">

                <span style="font-weight: 700;">车辆轨迹：</span>
                <el-form-item>
                    <el-input style="width: 210px" placeholder="驾驶员姓名/电话（关键字查询）" v-model="dg.se.driverInfo">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-select v-model="dg.se.plateNum" clearable collapse-tags :placeholder="'车牌号'"
                        style="width: 180px">
                        <el-option v-for="it in plateNumArr" :label="it.plate_num" :key="it.plate_num"
                            :value="it.plate_num">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="dg.se.stime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" clearable style="width: 180px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-date-picker :default-time="defaultTime" v-model="dg.se.etime" type="datetime"
                        format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" clearable
                        style="width: 180px;">
                    </el-date-picker>
                </el-form-item>
                <el-button type="primary" icon="Search" @click.native="getDgList(2)">搜索</el-button>


            </el-form>
            <!-- 未完团订单 -->
            <el-form :model="dg.ps" :inline="true">
                <span style="font-weight: 700;">未完团订单：</span>
                <el-form-item>
                    <el-select v-model="dg.ps.plateNum" clearable collapse-tags :placeholder="'车牌号'"
                        style="width: 180px">
                        <el-option v-for="it in plateNumArr" :label="it.plate_num" :key="it.plate_num"
                            :value="it.plate_num">
                        </el-option>
                    </el-select>

                </el-form-item>

                <el-button type="primary" icon="Search"
                    @click.native="getNoCompleteOrder_api(dg.ps.plateNum ? '1' : '2')">搜索</el-button>


            </el-form>

        </div>
        <div class="order-map-content" :style="{ 'height': (mapHeight) + 'px' }">
            <div class="order-list-ocstate" :style="{ 'display': 'block', 'left': left_off ? '300px' : '0px' }"
                :title="left_off ? '隐藏列表' : '显示列表'" @click="left_off = !left_off">
                <!-- <i :class="left_off ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i> -->
                <el-icon :size="10">
                    <DArrowLeft v-if="left_off" />
                    <DArrowRight v-else />
                </el-icon>
            </div>
            <div v-if="left_off" class="order-list-left" :style="{ 'width': alOcstate ? '300px' : '0px' }">
                <div class="order-list-container">
                    <div class="order-list-main box" :infinite-scroll-immediate="true">
                        <ul>
                            <li v-if="left_list.length == 0"><el-empty description="没有任何数据！"></el-empty></li>

                            <li v-for="(it, index) in left_list" :key="index" @click="selAreaItem(it)">

                                <div class="title">
                                    <b>{{ index + 1 }}</b>
                                    <span v-if="it.orderStatus == 'START_TAKE_CUS'" style="color: green;">已出发去接客户</span>
                                    <span v-else-if="it.orderStatus == 'AL_TRAVEL'" style="color: green;">已出行</span>
                                    <span
                                        v-else-if="it.orderStatus == 'DRIVER_CONFIRMED' || it.orderStatus == 'DRIVER_NOT_CONFIRM'"
                                        style="color: red;">未出行</span>
                                    <!-- <el-button style="height: 30px;" type="warning" @click="getDgList(2)">刷新</el-button> -->
                                </div>
                                <div style="display: flex;"><label style="width: 50%;">姓 名：{{ it.driverName
                                        }}</label><label>车牌号：{{ it.plateNum }}</label></div>
                                <div style="display: flex;"
                                    v-if="it.orderStatus == 'START_TAKE_CUS' || it.orderStatus == 'AL_TRAVEL'"><label
                                        style="width: 50%;">剩余距离：{{ it.distance + '公里'
                                        }}</label><label>剩余耗时：{{ it.time + '分钟' }}</label>
                                </div>
                                <div
                                    v-else-if="it.orderStatus == 'DRIVER_CONFIRMED' || it.orderStatus == 'DRIVER_NOT_CONFIRM'">
                                    <div> <label style="width: 50%;">开始时间：{{ it.stime }}

                                        </label></div>
                                    <div> <label>结束时间：{{ it.etime }}</label></div>
                                </div>
                                <div><label>电 话：</label>{{ it.driverPhone }}</div>
                                <div><label>起点地址：</label>{{ it.startAddress }}</div>
                                <div><label>终点地址：</label>{{ it.endAddress }}</div>
                                <div><label>行程详情:</label>{{ it.routeDetail }}</div>
                                <div><label>客户备注：</label>{{ it.cusNote }}</div>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>

            <div id="myMap" :style="{ 'height': (mapHeight) + 'px' }"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { fullHeightAPI, securityJsCode, key, scopy } from '@/utils/common.js'
import { GET_TOKEN } from '@/utils/token.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import {
    findCarCombo, getVehiclesCurrentPosition, getVehiclesPosition, getNoCompleteOrder, getVehiclesCurrentPositionByProgram,
    findTrusteeshipMeCombo,

} from '@/api/financial_center.js'
import AMapLoader from "@amap/amap-jsapi-loader"
onMounted(async () => {
    // 首次加载
    window._AMapSecurityConfig = {
        securityJsCode: securityJsCode,
    }
    AMapLoader.load({
        key: key,
        version: '2.0',
        plugins: ['AMap.Driving'],
    }).then((AMap) => {
        // 初始化-地图对象
        myMap.value = new AMap.Map('myMap', {
            zoom: 10,
            center: [104.065861, 30.657401]
        });

        // 初始化-地图数据

    }).catch(err => {
        console.log('高德地图加载失败：', err);
    });





    await getAllPlateNumList()

    // 自适应地图高度
    mapHeight.value = fullHeight - 117 - dgtools.value.clientHeight
    await getDgList()


})
//#region 数据
const dgtools = ref('')
const markers = ref([])
const plateNums = ref([])
const allDayNoOrderCars = ref(0)
const haveOrderButNotCurrentCars = ref(0)
const onCurrentRouteCars = ref(0)
const left_off = ref(false)
const left_list = ref([])
const plateNumArr = ref([])
const fullHeight = fullHeightAPI()
const mapHeight = ref(0)
const myMap = ref(null)
const orderMapTrackList = ref([])
const curOrder = ref(null)
const alOcstate = ref(true)
const dg = reactive({
    // 列表数据
    list: [],
    // 查询条件参数对象
    now: {
        page: 1,
        rows: 1000,
        // 驾驶员姓名或电话 （关键字查询）
        driverInfo: '',
        // 车牌号
        plateNum: '',
        // 轨迹开始时间（精确到分，默认当前时间点）
        stime: '',
        // 轨迹结束时间（精确到分，默认当前时间点）
        etime: '',
    },
    // 未完团
    ps: {
        page: {
            pageNum: 1,
            pageSize: 999,
        },
        // 驾驶员姓名或电话 （关键字查询）
        driverInfo: '',
        // 车牌号
        plateNum: '',
        // 轨迹开始时间（精确到分，默认当前时间点）
        stime: '',
        // 轨迹结束时间（精确到分，默认当前时间点）
        etime: '',

    },
    // 车辆轨迹
    se: {
        page: 1,
        rows: 1000,
        // 驾驶员姓名或电话 （关键字查询）
        driverInfo: '',
        // 车牌号
        plateNum: '',
        // 轨迹开始时间（精确到分，默认当前时间点）
        stime: '',
        // 轨迹结束时间（精确到分，默认当前时间点）
        etime: '',
    }
})

const defaultTime = new Date(2000, 1, 1, 23, 59, 59)
// 地图
const orderDriving = ref('')
const orderWayTrack = ref('')
//#endregion

// 车牌号
const getAllPlateNumList = () => {
    findTrusteeshipMeCombo({
        page: {
            pageNum: 1,
            pageSize: 999,
        },
        companyName: '',
    }).then(res => {
        let luser = JSON.parse(localStorage.getItem("luser"))
        let luser_companyNum = luser.companyNum
        let companyNums = [luser_companyNum]
        if (res.data) {
            for (let i = 0; i < res.data.length; i++) {
                console.log(res.data[i].companyNum)
                companyNums.push(res.data[i].companyNum)
            }
        }
        findCarCombo({
            page: {
                pageNum: 1,
                pageSize: 999,
            },
            plateNum: '',
            companyNums: companyNums,
        }).then(res => {

            plateNumArr.value = res.data.list
        })
    })

}

// 获取-列表
const getDgList = (page, e) => {
    let ps = scopy(dg.ps)
    let se = scopy(dg.se)
    let map = myMap.value

    clearAllOrderDriving()
    if (page == 2) {
        dg.ps.plateNum = ''
        dg.now.plateNum = ''


        off_map()
        if (se.stime == '' || se.stime == null) {
            return ElMessage({
                message: '请选择开始时间！',
                type: 'warning',
            })


        }
        if (se.etime == '' || se.etime == null) {
            return ElMessage({
                message: '请选择结束时间！',
                type: 'warning',
            })

        }
        if (se.plateNum == '' || se.plateNum == null) {
            return ElMessage({
                message: '请选择车牌号！',
                type: 'warning',
            })
        }
        left_off.value = false
        let ps = {

            page: {
                pageNum: 1,
                pageSize: 999,
            },
            driverInfo: se.driverInfo,
            plateNum: se.plateNum,
            stime: se.stime,
            etime: se.etime,
        }

        getVehiclesPosition(ps).then(res => {

            if (res && res.code == 1) {

                clear_btn()

                dg.list = res.data;

                // 显示订单对应的地图点标记
                if (myMap.value) showOrderMarker(dg.list, 2);
            }
        });



    } else if (page == 1) {
        dg.ps.plateNum = ''
        dg.se.plateNum = ''
        dg.se.driverInfo = ''
        dg.se.stime = ''
        dg.se.etime = ''

        clearAllOrderDriving()
        left_off.value = false, // 左侧菜单栏开关
            left_list.value = [], // 左侧未完团订单列表
            off_map()
        if (orderWayTrack.value) {
            map.remove(orderWayTrack.value);
            orderWayTrack.value.destroy();

        }
        let ps = {
            page: {
                pageNum: 1,
                pageSize: 999,
            },
            driverInfo: '',
            plateNum: dg.now.plateNum,
            stime: '',
            etime: '',
        }
        if (e == 2) {
            getVehiclesCurrentPositionByProgram(ps).then(res => {
                if (res && res.code == 1) {
                    if (markers.value.length > 0) {
                        clear_btn()
                    }

                    dg.list = res.data.data
                    plateNums.value = res.data.plateNums

                    allDayNoOrderCars.value = res.data.allDayNoOrderCars
                    haveOrderButNotCurrentCars.value = res.data.haveOrderButNotCurrentCars
                    onCurrentRouteCars.value = res.data.onCurrentRouteCars
                    // 显示订单对应的地图点标记
                    if (myMap.value) showOrderMarker(dg.list);
                } else {

                    return ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            });
        } else {
            getVehiclesCurrentPosition(ps).then(res => {
                if (res && res.code == 1) {
                    if (markers.value.length > 0) {
                        clear_btn()
                    }

                    dg.list = res.data.data
                    plateNums.value = res.data.plateNums

                    allDayNoOrderCars.value = res.data.allDayNoOrderCars
                    haveOrderButNotCurrentCars.value = res.data.haveOrderButNotCurrentCars
                    onCurrentRouteCars.value = res.data.onCurrentRouteCars
                    // 显示订单对应的地图点标记
                    if (myMap.value) showOrderMarker(dg.list);
                } else {

                    return ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            });
        }


    } else {

        if (orderWayTrack.value) {
            map.remove(orderWayTrack.value);
            orderWayTrack.value.destroy();

        }

        if (e == 2) {
            getVehiclesCurrentPositionByProgram(ps).then(res => {
                if (res && res.code == 1) {
                    if (markers.value.length > 0) {
                        clear_btn()
                    }
                    dg.list = res.data.data
                    plateNums.value = res.data.plateNums

                    allDayNoOrderCars.value = res.data.allDayNoOrderCars
                    haveOrderButNotCurrentCars.value = res.data.haveOrderButNotCurrentCars
                    onCurrentRouteCars.value = res.data.onCurrentRouteCars
                    // 显示订单对应的地图点标记
                    if (myMap.value) showOrderMarker(dg.list);
                }
            });
        } else {
            getVehiclesCurrentPosition(ps).then(res => {
                if (res && res.code == 1) {
                    if (markers.value.length > 0) {
                        clear_btn()
                    }
                    dg.list = res.data.data
                    plateNums.value = res.data.plateNums

                    allDayNoOrderCars.value = res.data.allDayNoOrderCars
                    haveOrderButNotCurrentCars.value = res.data.haveOrderButNotCurrentCars
                    onCurrentRouteCars.value = res.data.onCurrentRouteCars
                    // 显示订单对应的地图点标记
                    if (myMap.value) showOrderMarker(dg.list);
                }
            });
        }

    }

}

// 关闭地图弹窗
const off_map = () => {

    let map = myMap.value;
    // let lnglatArr = curOrder[0].positions[0].lngLat.split(',');
    // // 坐标
    let lnglat = [104.058559, 30.676884];


    // 设置信息框对象（优先设置）<b>'+o.index+'</b>
    let winInfo = null
    let cwin = new AMap.InfoWindow({
        // position: lnglat,
        offset: new AMap.Pixel(0, -40),
        content: '当前地点'
    });

    // 显示信息框
    cwin.setContent(winInfo);
    cwin.open(map, lnglat);

    // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
    // map.panTo(lnglat); // 方法一
    cwin.close()
}

// 清除所有订单轨迹
const clearAllOrderDriving = () => {
    let map = myMap.value;

    if (orderDriving.value) orderDriving.value.clear();


    // 清除所选订单途径轨迹
    if (orderWayTrack.value) {
        map.remove(orderWayTrack.value);
        orderWayTrack.value.destroy();

    }


}

const clear_btn = () => {

    let map = myMap.value
    map.remove(markers.value);
    markers.value = []
}
const getVehiclesCurrentPositionByProgram_data = ref('1')

// 显示订单对应地图标记
const showOrderMarker = (list, num) => {
    let map = myMap.value

    if (num == 2) {

        let arr = []
        for (let i = 0; i < list.length; i++) {
            if (list[i].positions.length > 0) {
                arr.push(list[i])
            }
        }


        // 标记图标


        let red = new AMap.Icon({
            size: new AMap.Size(36, 36), // 图标尺寸

            image: 'https://t8.baidu.com/it/u=95513423,888278254&fm=193',
            imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
            imageOffset: new AMap.Pixel(0, 0) // 图像相对展示区域的偏移量，适于雪碧图等
        });
        let blue = new AMap.Icon({
            size: new AMap.Size(36, 36), // 图标尺寸

            image: 'https://img0.baidu.com/it/u=1063578595,2842121212&fm=253&fmt=auto&app=138&f=JPEG?w=740&h=400',
            imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
            imageOffset: new AMap.Pixel(0, 0) // 图像相对展示区域的偏移量，适于雪碧图等
        });

        let yellow = new AMap.Icon({
            size: new AMap.Size(36, 36), // 图标尺寸

            image: 'https://img1.baidu.com/it/u=979548916,3828174446&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400',
            imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
            imageOffset: new AMap.Pixel(0, 0) // 图像相对展示区域的偏移量，适于雪碧图等
        });


        for (let j = 0; j < arr.length; j++) {


            let marker = new AMap.Marker({
                icon: arr[j].positions[0].onRoute == -1 ? red : arr[j].positions[0].onRoute == 0 ?
                    yellow : blue,
                position: [parseFloat(arr[j].positions[0].lng), parseFloat(arr[j].positions[0].lat)]
            });

            // 绑定数据
            marker.plateNum = arr[j].plateNum

            markers.value.push(marker);


        }
        map.add(markers.value)

        // 自动适应显示想显示的范围区域
        map.setFitView();
        selAreaItem(list, 2)//

    } else {

        let arr = []
        for (let i = 0; i < list.length; i++) {
            if (list[i].positions.length > 0) {
                arr.push(list[i])
            }
        }
        // 标记图标
        let red = new AMap.Icon({
            size: new AMap.Size(36, 36), // 图标尺寸

            image: 'https://t8.baidu.com/it/u=95513423,888278254&fm=193',
            imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
            imageOffset: new AMap.Pixel(0, 0) // 图像相对展示区域的偏移量，适于雪碧图等
        });
        let blue = new AMap.Icon({
            size: new AMap.Size(36, 36), // 图标尺寸

            image: 'https://img0.baidu.com/it/u=1063578595,2842121212&fm=253&fmt=auto&app=138&f=JPEG?w=740&h=400',
            imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
            imageOffset: new AMap.Pixel(0, 0) // 图像相对展示区域的偏移量，适于雪碧图等
        });

        let yellow = new AMap.Icon({
            size: new AMap.Size(36, 36), // 图标尺寸

            image: 'https://img1.baidu.com/it/u=979548916,3828174446&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400',
            imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
            imageOffset: new AMap.Pixel(0, 0) // 图像相对展示区域的偏移量，适于雪碧图等
        });

        for (let j = 0, marker, s; j < arr.length; j++) {
            marker = new AMap.Marker({
                icon: arr[j].positions[0].onRoute == -1 ? red : arr[j].positions[0].onRoute == 0 ?
                    yellow : blue,
                position: [parseFloat(arr[j].positions[0].lng), parseFloat(arr[j].positions[0].lat)]
            });

            // 绑定数据
            marker.plateNum = arr[j].plateNum
            // 点击标点事件
            marker.on('click', (e) => {
                left_off.value = true
                dg.ps.plateNum = e.target.plateNum

                getNoCompleteOrder_api()
            })
            let timeoutId = null;

            // 鼠标悬停事件
            marker.on('mouseover', (e) => {
                timeoutId = setTimeout(() => {
                    getNoComp(arr[j])
                }, 1000)

            })
            marker.on('mouseout', (e) => {
                clearTimeout(timeoutId)
            })

            // 添加信息框
            // 坐标
            let lnglatArr = arr[j].positions[0].lngLat.split(',');
            // 坐标
            let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];
            // 车牌
            let plateNum = arr[j].plateNum == "" || arr[j].plateNum == null ? '' : arr[j].plateNum
            let distance = arr[j].driverInfo == "" || arr[j].driverInfo == null ? '' : arr[j].driverInfo

            let winInfo = arr[j].positions[0].onRoute == -1 ? '<div class="cpoint-infowin1">' + plateNum +
                '-' + distance + '</div>' : arr[j].positions[0].onRoute == 0 ?
                '<div class="cpoint-infowin3" style="color:black">' + plateNum + '-' + distance + '</div>' :
                '<div class="cpoint-infowin2" >' + plateNum + '-' + distance + '</div>'

            marker.setLabel({
                direction: 'top',
                offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
                content: winInfo, //设置文本标注内容
            });


            markers.value.push(marker);



        }
        map.add(markers.value)
        // 自动适应显示想显示的范围区域
        map.setFitView()
    }
}

// 显示-区域返回
const selAreaItem = (o, num) => {

    let map = myMap.value
    if (num == 2) {
        if (o) {
            if (o[0].positions.length < 1) {
                return ElMessage({
                    message: '暂无车辆轨迹信息！',
                    type: 'warning',
                })

            }
            curOrder.value = o; // 选中的订单
            // 选中当前区域，并显示标记及信息框

            setMapCenterMarker(o, 2);


            // 订单轨迹点列表
            let plist = o[0].positions;
            // 清空订单轨迹点列表

            orderMapTrackList.value = [];
            plist.forEach(it => {
                // 坐标


                orderMapTrackList.value.push([it.lng, it.lat]);

            });
            showOrderTrackPoline(2);
        }
    } else {
        getDgList()
        if (o) {
            if (o.spoint == '' || o.spoint == null) {
                return ElMessage({
                    message: '暂无车辆轨迹信息！',
                    type: 'warning',
                })

            }
            curOrder.value = o; // 选中的订单
            // 选中当前区域，并显示标记及信息框

            setMapCenterMarker(o);




            // 清空订单轨迹点列表


            if (o.orderStatus == 'DRIVER_NOT_CONFIRM' || o.orderStatus == 'DRIVER_CONFIRMED') {
                orderMapTrackList.value = [
                    [o.slng, o.slat],
                    [o.elng, o.elat]
                ];
            } else if (o.orderStatus == 'START_TAKE_CUS') {
                orderMapTrackList.value = [
                    [o.currLng, o.currLat],
                    [o.slng, o.slat]
                ];
            } else if (o.orderStatus == 'AL_TRAVEL') {
                orderMapTrackList.value = [
                    [o.currLng, o.currLat],
                    [o.elng, o.elat]
                ];
            }


            showOrderTrackPoline();

        }
    }
}

// 设置-地图中心点
const setMapCenterMarker = (o, num) => {

    let map = myMap.value
    if (num == 2) {

        // 坐标
        let lnglatArr = o[0].positions[0].lngLat.split(',');
        // 坐标
        let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];



        // 车牌
        let plateNum = o[0].plateNum == "" || o[0].plateNum == null ? '' : o[0].plateNum
        // 驾驶员
        let driverInfo = o[0].driverInfo == "" || o[0].driverInfo == null ? '' : o[0].driverInfo
        // 开始
        let saddress = o[0].positions[0].address == "" || o[0].positions[0].address == null ? '' : o[0]
            .positions[0].address

        // 结束
        let eaddress = o[0].positions[o[0].positions.length - 1].address == "" || o[0].positions[o[0].positions
            .length - 1].address == null ? '' : o[0].positions[o[0].positions.length - 1].address
        // 设置信息框对象（优先设置）<b>'+o.index+'</b>
        let winInfo =
            '<div class="cpoint-infowin">' +
            '<p class="ci-title">' + plateNum + '</p>' +
            '<p class="ci-addr" >驾驶员：' + driverInfo + '公里' + '</p>' +
            '<p class="ci-addr">开始地址：' + saddress + '</p>' +
            '<p class="ci-addr">结束地址：' + eaddress + '</p>' +
            '</div>';
        let cwin = new AMap.InfoWindow({
            position: lnglat,
            offset: new AMap.Pixel(17, -5),
            content: '当前地点'
        });

        // 显示信息框
        cwin.setContent(winInfo);
        cwin.open(map, lnglat);

        // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
        map.panTo(lnglat); // 方法一

    } else {


        if (o.orderStatus == 'START_TAKE_CUS' || o.orderStatus == 'AL_TRAVEL') {
            // 坐标
            let lnglatArr = o.currPoint.split(',');
            // 坐标
            let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];



            // 车牌
            let plateNum = o.plateNum == "" || o.plateNum == null ? '' : o.plateNum
            // 距离
            let distance = o.distance == "" || o.distance == null ? '' : o.distance
            // 耗时
            let time = o.time == "" || o.time == null ? '' : o.time
            // 设置信息框对象（优先设置）<b>'+o.index+'</b>
            let winInfo =
                '<div class="cpoint-infowin">' +
                '<p class="ci-title">' + plateNum + '</p>' +
                '<p class="ci-addr" >距离：' + distance + '公里' + '</p>' +
                '<p class="ci-addr">耗时：' + time + '分钟' + '</p>' +
                '</div>';
            let cwin = new AMap.InfoWindow({
                position: lnglat,
                // offset: new AMap.Pixel(13, 0),
                offset: new AMap.Pixel(0, -40),
                content: '当前地点'
            });

            // 显示信息框
            cwin.setContent(winInfo);
            cwin.open(map, lnglat);

            // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
            map.panTo(lnglat); // 方法一


        } else {
            // 坐标
            let lnglatArr = o.spoint.split(',');
            // 坐标
            let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];


            // 车牌
            let plateNum = o.plateNum == "" || o.plateNum == null ? '' : o.plateNum
            // 距离
            let distance = o.distance == "" || o.distance == null ? '' : o.distance
            // 耗时
            let time = o.time == "" || o.time == null ? '' : o.time
            // 设置信息框对象（优先设置）<b>'+o.index+'</b>
            let winInfo = null
            let cwin = new AMap.InfoWindow({
                position: lnglat,
                offset: new AMap.Pixel(0, -40),
                content: '当前地点'
            });

            // 显示信息框
            cwin.setContent(winInfo);
            cwin.open(map, lnglat);

            // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
            map.panTo(lnglat); // 方法一
            cwin.close()
        }
    }

}

// 地图显示订单轨迹
const showOrderTrackPoline = (num) => {
    let map = myMap.value
    let curOrder_data = curOrder.value
    let lineArr = orderMapTrackList.value

    if (num == 2) {

        // 清除搜索订单驾车行程线路
        if (orderDriving.value) orderDriving.value.clear();
        // 构造路线导航类
        orderDriving.value = new AMap.Driving({
            map: map
        });


        // 清除所选订单途径轨迹
        if (orderWayTrack.value) {
            map.remove(orderWayTrack.value);
            orderWayTrack.value.destroy();

        }




        // 订单途径轨迹
        orderWayTrack.value = new AMap.Polyline({
            map: map,
            path: lineArr,
            showDir: true,
            // 线颜色 黑色
            strokeColor: 'red',
            // 线透明度  
            strokeOpacity: 0.9,
            // 线宽 
            strokeWeight: 8,
            // 线样式
            strokeStyle: "solid"
        });
    } else {
        console.log(curOrder_data, 'curOrder_data')
        let slnglat = null
        let elnglat = null
        if (curOrder_data.orderStatus == 'DRIVER_NOT_CONFIRM' || curOrder_data.orderStatus == 'DRIVER_CONFIRMED') {
            slnglat = [parseFloat(curOrder_data.spoint.split(',')[0]), parseFloat(curOrder_data.spoint.split(',')[1])];
            elnglat = [parseFloat(curOrder_data.epoint.split(',')[0]), parseFloat(curOrder_data.epoint.split(',')[1])];
        } else if (curOrder_data.orderStatus == 'START_TAKE_CUS') {
            slnglat = [parseFloat(curOrder_data.currPoint.split(',')[0]), parseFloat(curOrder_data.currPoint.split(',')[
                1])];
            elnglat = [parseFloat(curOrder_data.spoint.split(',')[0]), parseFloat(curOrder_data.spoint.split(',')[1])];
        } else if (curOrder_data.orderStatus == 'AL_TRAVEL') {
            slnglat = [parseFloat(curOrder_data.currPoint.split(',')[0]), parseFloat(curOrder_data.currPoint.split(',')[
                1])];
            elnglat = [parseFloat(curOrder_data.epoint.split(',')[0]), parseFloat(curOrder_data.epoint.split(',')[1])];
        } else {
            return
        }


        // 清除搜索订单驾车行程线路
        if (orderDriving.value) orderDriving.value.clear();
        // 构造路线导航类
        orderDriving.value = new AMap.Driving({
            map: map
        });
        // 根据起终点经纬度规划驾车导航路线
        if (left_list.value.length > 0) {
            orderDriving.value.search(slnglat, elnglat,
                function (status, result) {
                    // result 即是对应的驾车导航信息
                    if (status === 'complete') {
                        // console.log('绘制驾车路线完成', result);
                    } else {
                        console.log('获取驾车数据失败：', result);
                    }
                }
            );
        }

        // 清除所选订单途径轨迹
        if (orderWayTrack.value) {
            map.remove(orderWayTrack.value);
            orderWayTrack.value.destroy();

        }

        // 订单线的颜色
        let strokeColor = null
        if (curOrder_data.orderStatus == 'START_TAKE_CUS' || curOrder_data.orderStatus == 'AL_TRAVEL') {
            strokeColor = 'green'
        } else if (curOrder_data.orderStatus == 'DRIVER_NOT_CONFIRM' || curOrder_data.orderStatus ==
            'DRIVER_CONFIRMED') {
            strokeColor = 'red'
        }



    }

}


// 未完团订单列表
const getNoCompleteOrder_api = (num) => {


    let data = dg.ps
    let map = myMap.value
    dg.se.stime = ''
    dg.se.etime = ''
    dg.se.plateNum = ''
    dg.se.driverInfo = ''
    dg.now.plateNum = ''
    clearAllOrderDriving()
    if (orderWayTrack.value) {
        map.remove(orderWayTrack.value);
        orderWayTrack.value.destroy();

    }

    if (num == 2) {
        getDgList(1)
    } else {

        left_off.value = true
        let ps = {
            plateNum: data.plateNum,


        }
        // 没有接口
        getNoCompleteOrder(ps).then(res => {
            if (res && res.code == 1) {

                left_list.value = res.data;
                console.log(left_list.value, 'left_list.value')

            } else {
                left_list.value = []
                // 清空订单轨迹点列表
                orderMapTrackList.value = [];
                showOrderTrackPoline();
            }
        });
        clearAllOrderDriving()
        selAreaItem(left_list.value[0])
    }
}

// 鼠标悬停事件
const getNoComp = (e) => {

    let map = myMap.value

    // 坐标
    let lnglatArr = e.positions[0].lngLat.split(',');
    // 坐标
    let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];



    // 车牌
    let plateNum = e.plateNum == "" || e.plateNum == null ? '' : e.plateNum
    // 距离
    let distance = e.driverInfo == "" || e.driverInfo == null ? '' : e.driverInfo
    let address = e.positions[0].address == "" || e.positions[0].address == null ? '' : e.positions[0].address
    // 设置信息框对象（优先设置）<b>'+o.index+'</b>
    let winInfo =
        '<div class="cpoint-infowin">' +
        '<p class="ci-title">' + plateNum + '</p>' +
        '<p class="ci-addr" >驾驶员：' + distance + '</p>' +
        '<p class="ci-addr" >地址：' + address + '</p>' +
        '</div>';
    let cwin = new AMap.InfoWindow({
        position: lnglat,
        offset: new AMap.Pixel(17, -5),
        content: '当前地点'
    });


    // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
    map.panTo(lnglat); // 方法一
    let timer = null
    setTimeout(() => {
        // 显示信息框
        cwin.setContent(winInfo);
        cwin.open(map, lnglat);
        clearTimeout(timer)
    }, 500);

}

</script>

<style scoped lang='scss'>
.travel-order-progress {
    ::v-deep(.el-form-item) {
        margin-bottom: 0px !important;
    }

    width: 100%;
    position: relative;

    .tools-tj-data {
        margin-left: 20px;

        label {
            font-size: 13px;
        }

        b {
            font-size: 12px;
        }
    }

    //展开/隐藏-区域列表
    .order-list-ocstate {
        width: 15px;
        height: 80px;
        line-height: 80px;
        z-index: 9999;
        background: #15a3fa;
        position: absolute;
        top: 50%;
        left: 0px;
        transition: left 500ms linear;
        cursor: pointer;
        text-align: center;
        border-radius: 0px 5px 5px 0px;
        color: #fff;
    }

    .search-box {
        position: absolute;
        z-index: 5;
        width: 60%;
        left: 30%;
        top: 70px;
        height: 30px;

        .map-search-inp {

            ::v-deep(.el-input__inner) {
                width: 400px;
                font-size: 13px;
                border: 2px solid #30ccc1;
                color: #30ccc1;
                outline: none;
            }
        }

    }

    .order-map-content {
        display: flex;

        // 区域列表项
        .order-list-left {
            transition: width 500ms linear;

            .order-list-container {
                padding-top: 1px;
                padding-left: 5px;
                background: #f3f3f3;
                height: 100%;

                .order-list-tools {
                    .search-inp {
                        display: flex;
                        justify-content: flex-start;

                        input {
                            flex: 1;
                            height: 28px;
                            font-size: 13px;
                            border: 2px solid #30ccc1;
                            color: #30ccc1;
                            font-weight: 600;
                            padding: 0 8px;
                            outline: none;
                            margin-right: 5px;
                            border-radius: 3px;
                        }
                    }
                }

                .order-list-main::-webkit-scrollbar {
                    width: 5px !important;
                }

                .order-list-main {
                    width: 290px;
                    background: #ffffff;
                    height: 100%;
                    margin-top: 5px;
                    padding-top: 5px;
                    border-radius: 3px;
                    overflow-x: hidden;
                    overflow-y: auto;

                    ul {
                        margin: 0;
                        padding: 0;

                        .load-state {
                            padding: 0px;
                            text-align: center;

                            p {
                                margin: 0px;
                            }
                        }

                        li {
                            position: relative;
                            padding: 0;
                            margin: 0;
                            list-style: none;
                            margin: 0 5px;
                            padding: 5px;
                            border-bottom: 1px solid #f3f3f3;
                            font-size: 12px;
                            line-height: 20px;
                            cursor: pointer;
                            padding-top: 20px;

                            .title {
                                position: absolute;
                                top: 0px;
                                left: 0px;

                                b {
                                    display: inline-block;
                                    padding: 0px 5px;
                                    background: #2979ff;
                                    color: #fff;
                                }

                                span {
                                    vertical-align: middle;
                                    font-weight: 600;
                                    padding-left: 5px;
                                    font-size: 13px;
                                    color: #555;
                                }
                            }

                            .seled-icon {
                                position: absolute;
                                top: 2px;
                                right: 5px;
                                color: #2979ff;
                                font-size: 20px;
                                cursor: default;
                            }

                            .ali-btns {
                                position: absolute;
                                bottom: 2px;
                                right: 0px;
                            }
                        }

                        li.seled {
                            background: #f3f3f3;
                        }
                    }
                }
            }
        }



        #myMap {
            flex: 1;
            width: 100%;

            // 触控发生时不进行任何操作
            // touch-action: none;
            ::v-deep(.amap-marker-label) {
                border: 0;
                background-color: transparent;
                color: #fff;
            }

            ::v-deep(.info) {
                position: relative;
                margin: 0;
                top: 0;
                right: 0;
                min-width: 0;
                color: #fff;
            }

            ::v-deep(.cpoint-infowin1) {
                // padding-top: 15px;
                width: 110px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                background-color: red;
            }

            ::v-deep(.cpoint-infowin2) {
                // padding-top: 15px;
                width: 110px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                background-color: blue;
            }

            ::v-deep(.cpoint-infowin3) {
                // padding-top: 15px;
                width: 110px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                background-color: yellow;
            }

            ::v-deep(.cpoint-infowin) {
                max-width: 300px;
                // padding-top: 15px;
                width: 200px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                .ci-title {
                    margin: 0;
                    font-size: 16px;
                    color: #2979ff;
                    text-align: center;
                    font-weight: bold;

                    b {
                        background: #2979ff;
                        color: #fff;
                        font-weight: 600;
                        padding: 0px 5px;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                    }
                }

                .ci-addr {
                    margin: 0;
                    font-size: 13px;
                    color: green;
                }

            }
        }
    }
}
</style>

<style>
.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}


.el-table .el-table__cell {
    padding: 0px !important;
}
</style>
